<template>
  <el-menu-item index="12" @click="isReport = !isReport">报告路况</el-menu-item>
  <div class="road-condition-container" v-show="isReport">
    <!-- header -->
    <div class="road-condition-header">
      <h2>报告路况</h2>
      <img
        class="close"
        src="../../../images/close.png"
        alt=""
        @click="isReport = false"
      />
    </div>
    <!-- body -->
    <div class="road-condition-event">
      <span>事件类型</span>
      <select class="custom-select" v-model="selectedEventType">
        <option value="" disabled selected hidden>请选择事件类型</option>
        <option v-for="event in eventtype" :key="event" :value="event">
          {{ event }}
        </option>
      </select>
      <img class="must" src="../../../images/must.png" alt="" />
      <br />
      <span>事件地址</span>
      <input
        type="text"
        v-model="eventAddress"
        placeholder="请输入路况地址，包含事故路段"
      />
      <img class="must" src="../../../images/must.png" /><br />
      <span>建筑标识</span>
      <input
        type="text"
        placeholder="请输入事故最近的建筑标识"
        v-model="buildingSign"
      /><br />

      <div class="date-picker-container">
        <span>发生时间</span>
        <el-date-picker
          style="
            width: 340px;
            height: 25px;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 0px;
            margin-bottom: 10px;
            font-size: 14px;
            outline: none;
            color: #ccc;
          "
          v-model="dateTime"
          type="datetime"
          placeholder="选择日期和时间"
          @change="handleDateChange"
          class="date-picker"
        ></el-date-picker>
        <img class="must" src="../../../images/must.png" alt="" />
      </div>
      <span>事件描述</span>
      <input
        type="text"
        placeholder="请输入事故的具体信息"
        v-model="eventDescription"
      /><br />
    </div>
    <!-- bottom -->
    <div class="road-condition-bottom">
      <button class="affirm" @click="submitForm">确认</button>
      <button @click="isReport = false">取消</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
import { useTrafficStore } from "@/stores/traffic";
const { addTrafficReport } = useTrafficStore(); // 导入store
const isReport = ref(false);
/* 实例化路由对象 */
const route = useRoute();

const eventtype = ref(["碰撞", "刮蹭", "碾压", "追尾", "超车", "失火", "其他"]);
/* 转成常规时间格式 */
const handleDateChange = (value) => {
  //console.log("选择的日期和时间:", value);
  const date = new Date(value);
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const hour = date.getHours();
  const minute = date.getMinutes();
  const second = date.getSeconds();
  const dateTimeStr = `${year}/${month}/${day} ${hour}:${minute}:${second}`;
  dateTime.value = dateTimeStr;
  //console.log("常规时间格式:", dateTime.value)
};

// 日期和时间的响应式变量
const selectedEventType = ref("");
const dateTime = ref(""); // 日期和时间的响应式变量
const eventAddress = ref("");
const buildingSign = ref("");
const eventDescription = ref("");

//当前路况信息
const curReport = ref([]);
// =====================点击确认按钮进行数据提交==============
const submitForm = () => {
  // 检查事件地址是否输入
  if (!selectedEventType.value) {
    alert("事件类型为必填项");
    return;
  }
  if (!eventAddress.value) {
    alert("事件地址为必填项");
    return;
  }
  if (!dateTime.value) {
    alert("发生时间为必填项");
    return;
  }
  const status = "待审核";
  const userName = route.query.username; //获取当前用户
  curReport.value = {
    username: userName,
    eventType: selectedEventType.value,
    eventAddress: eventAddress.value,
    buildingSign: buildingSign.value,
    dateTime: dateTime.value,
    eventDescription: eventDescription.value,
    status: status,
  };
  addTrafficReport(curReport.value);
  //console.log("提交成功");
  isReport.value = false;
  //清空表单数据
  selectedEventType.value = "";
  eventAddress.value = "";
  dateTime.value = "";
  buildingSign.value = "";
  eventDescription.value = "";
};
</script>

<style scoped>
.road-condition-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  height: 320px;
  width: 600px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  margin: 0 auto;
  border-radius: 5px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
/* header */
.road-condition-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
}
.road-condition-header img {
  width: 12px;
  height: 12px;
  margin-right: 20px;
}
.road-condition-header.close {
  cursor: pointer;
}
.road-condition-header h2 {
  padding: 10px;
  color: gray;
}
/* body */
.road-condition-event {
  width: 500px;
  margin: 0 auto;
  padding: 10px 0;
}
.road-condition-event span {
  font-weight: bold;
  margin-right: 20px;
}
.road-condition-event .must {
  margin-left: 10px;
  width: 10px;
  height: 10px;
}

.date-picker .el-input__inner {
  height: 100%; /* 使输入框高度填满 */
  padding: 10px; /* 内边距 */
  border: none; /* 去掉内部输入框的边框 */
  padding: 10px; /* 内部输入框的内边距 */
  color: #ccc;
  box-shadow: none;
}

.date-picker .el-input__inner:focus {
  border-color: #409eff; /* 聚焦时的边框颜色 */
  box-shadow: 0 0 5px rgba(64, 158, 255, 0.5); /* 聚焦时的阴影效果 */
}
.custom-select {
  width: 340px;
  height: 25px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  outline: none;
  z-index: 100;
}
.custom-select:focus {
  border-color: #409eff; /* 聚焦时的边框颜色 */
  box-shadow: 0 0 5px rgba(64, 158, 255, 0.5); /* 聚焦时的阴影效果 */
}

.custom-select option {
  outline: none;
  border: 1px solid black;
  z-index: inherit;
}
.road-condition-event input {
  width: 340px;
  height: 25px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  outline: none;
  font-size: 14px;
}
.road-condition-event input::placeholder {
  color: #ccc;
}
.road-condition-event input:focus {
  border-color: #409eff; /* 聚焦时的边框颜色 */
  box-shadow: 0 0 5px rgba(64, 158, 255, 0.5); /* 聚焦时的阴影效果 */
}
.date-picker-container {
  display: flex;
  align-items: top;
}
/* bottom */
.road-condition-bottom {
  height: 50px;
  width: 100%;
  border-top: 1px solid #ccc;
  text-align: right;
}
.road-condition-bottom button {
  padding: 8px 15px;
  margin: 10px;
  border: 1px solid #ccc;
  background-color: #f0f0f0; /* 背景颜色 */
  cursor: pointer; /* 鼠标悬停时显示为指针 */
  border-radius: 5px;
}
.road-condition-bottom button.affirm {
  background-color: #347bb7;
  color: white;
}
</style>
